<template>
	<ul class="cards-box-ul">
		<template v-for="(item, index) in opctions">
			<li class="cards-li" :key="index" v-if="item">
				<div class="title">
					<router-link :to="{ path: 'resourceDetail', query: { id: item.id } }" :title="item.name">
						{{ item.name }}.{{ item.postfix }}
					</router-link>
				</div>
				<div class="classify-row">
					<span>{{ item.cate_name }}</span>
					<el-divider direction="vertical"></el-divider>
					<span>{{ item.f_count }}人收藏</span>
				</div>
				<div class="rate-row">
					<el-rate :value="item.scores / 2" disabled></el-rate>
					<strong>{{ item.scores }}</strong>
					<div class="res-icon"><img :src="BASE_URL + '/static/index/images/format/resourceicon' + item.file_type + '.png'" /></div>
				</div>
				<div class="user">
					<a class="avatar" @click="goToAppModel('space/resource',item.u_id,item.push_code,item.app_code)">
						<div :title="item.u_name"><img :src="BASE_URL + item.u_avatar_path" /> {{ item.u_name }}</div>
					</a>
					<span class="push-name" :title="item.source_school" v-if="!isSchool">{{item.source_school}}</span>
				</div>
			</li>
			<!-- 占位符 -->
			<li class="cards-li" :key="index" v-else></li>
		</template>
	</ul>
</template>
<script>
export default {
    props: {
        opctions: {
            require:true,
            type: Array,
            default() {
                return [];
            }
        },

    },
    data() {
        return {
			errorImg: 'this.src="' + require('../../../assets/images/image_loding.png') + '"'
        };
    },
    mounted() {
    },
    watch: {

    },
	computed: {
		isSchool(){
			return this.$store.getters.isSchool;
      	}
    },
    methods: {

    }
};
</script>
<style lang="scss">
	.cards-box-ul {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		grid-template-rows: repeat(2, 1fr);
		grid-gap: 10px;
		align-items: center;
		justify-items: center;
	}

	.cards-li {
		box-sizing: border-box;
		width: 290px;
		height: 180px;
		padding: 15px 24px 10px 14px;
		box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
		border-radius: 3px;
		background-color: #fff;
		transition: all .35s ease-in;
		&:hover {
			box-shadow: 0 6px 7px 0 rgba(0,0,0,0.10);
			.title{
				color: #348efc;
			}
		}
		.title {
			width: 100%;
			height: 20px;
			line-height: 20px;
			font-size: 16px;
			color: #020202;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
		}
		.classify-row{
			margin-top:9px;
			line-height: 20px;
			color: #666;
		}
		.rate-row{
			padding: 18px 0 12px;
			display: flex;
			justify-content: space-between; 
			align-items: center;
			.el-rate,strong{
				vertical-align: middle;
			}
			strong{
				font-size: 18px;
				color: #FF6525;
			}
			.res-icon{
				display: inline-block;
				width: 50px;
				height: 50px;
				text-align: right;
			}
		}
		.user{
			display: flex;
			justify-content: space-between; 
			align-items: center;
			a{
				line-height: 26px;
			}
			img{
				display: inline-block;
				height: 26px;
				height: 26px;
				border-radius: 50%;
				margin-right: 10px;
			}
			a,span{
				display: inline-block;
				max-width: 120px;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}
		}
	}
</style>
